﻿/**
*DataColumn type Define
*auth:lww
*version:1.0
*date:2014-10-11
*/
var ColumnDataFlag = 0;
var ColumnCheckBoxFlag = 1;
var ColumnSerialNumberFlag = 2;
var ColumnSpaceFlag = 3;
var ColumnEditFlag = 4;
var ColumnImageFlag = 5;
var ColumnDropListFlag = 6;
var ColumnButtonFlag = 7;
/**
*DataColumn class
*auth:lww
*version:1.0
*date:2014-10-11
*/
function DataColumn(context) {
    this.id = "";
    this.name = "DataColumn";
    this.version = "1.0.0";
    this.mContext = context;
    /**
    *Column style
    */
    this.mWidth = "auto";
    this.mTitle = "";   
    this.mColor = "";   
    this.mFlag = ColumnDataFlag;
    /**
    *Column default value
    */
    this.mValue = "";
    this.mText = "";
    this.columnIndex = 0;
    this.sortType = 0;
}

DataColumn.prototype.getId = function () {
    if (this.id == null || this.id == "") {
        this.id = id();
    }
    return this.id;
};
DataColumn.prototype.setId = function (ids) {
    this.id = ids;
};

DataColumn.prototype.setWidth = function (w) {
    this.mWidth = w;
};
DataColumn.prototype.getWidth = function () {
    return this.mWidth;
};

DataColumn.prototype.setTitle = function (text) {
    this.mTitle = text;
};
DataColumn.prototype.getTitle = function () {
    return this.mTitle;
};

DataColumn.prototype.setFlag = function (v) {
    this.mFlag = v;
};
DataColumn.prototype.getFlag = function () {
    return this.mFlag;
};

DataColumn.prototype.setValue = function (v) {
    this.mValue = v;
};
DataColumn.prototype.getValue = function () {
    return this.mValue;
};

DataColumn.prototype.setColor = function (c) {
    this.mColor = c;
};
DataColumn.prototype.getColor = function () {
    return this.mColor;
};

DataColumn.prototype.init = function (title, w, flag,value,color) {
    this.setTitle(title);
    this.setWidth(w);
    //set column flag
    if (typeof (flag) != "undefined") {
        this.setFlag(flag);
    }
    //set column value
    if (typeof (value) != "undefined") {
        this.setValue(value);
    }
    //set column value
    if (typeof (color) != "undefined") {
        this.setColor(color);
    }
    //return DataColumn
    return this;
};

/**
 * NewDataColumn
 */
function NewDataColumn(dataGrid){
   var dataColumn =  new DataColumn(dataGrid);
   return dataColumn;
}

/**
*DataGridView class
*auth:lww
*version:1.0
*date:2014-10-11
*/
function DataGridView(context) {
    this.id = "";
    this.name = "DataGridView";
    this.version = "1.0.0";
    this.mContext = context;
    /**
    *View element
    */
    this.mView = null;
    this.mTitleView = null;
    this.mDataView = null;
    this.mColumnHeader = null;
    this.mDataTable = null;
    this.mVScrollView = null;
    this.mSelectRow = null;
    /**
    *View data
    */
    this.data = null;
    this.mColumnList = null;
    this.mCheckColumnList = null;
    this.mRowCount = 0; 
    this.mRowList = null;
    this.mCurrentSortIndex = 0;  
    /**
    *event
    */
    this.initFlag = false;
    this.mFocus = false;
    this.mWheel = null;
    this.mCurrentEditBox = null;
}

DataGridView.prototype.getId = function () {
    if (this.id == null || this.id == "") {
        this.id = id();
    }
    return this.id;
};

DataGridView.prototype.setId = function (ids) {
    this.id = ids;
};

DataGridView.prototype.invalidate = function () {
    if (this.mView == null) {
        this.mView = $c("div", this.getId());
        this.mTitleView = $c("div");
        this.mDataView = $c("div");
        setCss(this.mTitleView, "titleView");
        setCss(this.mDataView, "dataView");
        this.mView.appendChild(this.mTitleView);
        this.mView.appendChild(this.mDataView);
        //vscroll
        this.mVScrollView = $c("div");
        setCss(this.mVScrollView, "vscroll");
    }
    return this.mView;
};

DataGridView.prototype.view = function () {
    if (this.mView != null)
        return this.mView;
    return this.invalidate();
};

DataGridView.prototype.setClassName = function (name, flag) {
    this.invalidate();
    if (this.mView != null
        && name != null
        && typeof (name) != "undefined") {
        setCss(this.mView, name);
    }
};

/**
*add DataColumn
*/
DataGridView.prototype.addColumn = function (mColumn, flag) {
    if (this.mColumnList == null || (typeof (flag) != 'undefined' && flag === true)) {
        this.mColumnList = new Array();
    }
    var index = this.mColumnList.length;
    this.mColumnList[index] = mColumn;
    //set mColumn index
    mColumn.columnIndex = index;
    mColumn.sortType = 0;
};
/**
 * getColumn
 */
DataGridView.prototype.getColumn = function (cindex) {
    if (this.mColumnList == null || cindex < 0 && cindex >= this.mColumnList.length) {
       return null;
    }
    return this.mColumnList[cindex];
};

/**
 * getColumnCount
 */
DataGridView.prototype.getColumnCount = function (){
    if (this.mColumnList == null) {
        return 0;
    }
    return this.mColumnList.length;
};

/**
*save Check Column Object
*/
DataGridView.prototype.saveCheckColumn = function (o) {
    if (this.mCheckColumnList == null) {
        this.mCheckColumnList = new Array();
    }
    var index = this.mCheckColumnList.length;
    this.mCheckColumnList[index] = o;
};

/**
*set Current EditBox
*/
DataGridView.prototype.setCurrentEditBox = function (o) {
    if (this.mCurrentEditBox != null && this.mCurrentEditBox != o) {
        this.cancelCurrentEditBox();
    }
    this.mCurrentEditBox = o;    
    this.mCurrentEditBox.contentEditable = true;
    this.mCurrentEditBox.contenteditable = true;
    this.mCurrentEditBox.focus();  
    addCss(this.mCurrentEditBox, "editstatus");
    this.onEditEvent(this.mCurrentEditBox,true);
   
};

/**
*cancel Current EditBox
*/
DataGridView.prototype.cancelCurrentEditBox = function () {
    if (this.mCurrentEditBox != null) {
        this.mCurrentEditBox.contentEditable = false;
        this.mCurrentEditBox.contenteditable = false;
        this.mCurrentEditBox.blur();
        rmCss(this.mCurrentEditBox, "editstatus");
        this.onEditEvent(this.mCurrentEditBox,false);
        this.mCurrentEditBox = null;
    }
};

/**
*selected Row
*/
DataGridView.prototype.selectRow = function (o, isSelected) {
    if (this.mSelectRow != null) {
        setCss(this.mSelectRow, "");
        this.mSelectRow = null;
    }
    if (!isNull(o) && isSelected === true) {
        this.mSelectRow = o;
        setCss(this.mSelectRow, "selectedrow");
    }
};

/**
*init Title View
*/
DataGridView.prototype.initTitleView = function () {
    //init TitleView
    if (this.mColumnList != null && this.mColumnList.length > 0) {
        //clear 
        this.mTitleView.innerHTML = "";
        //create title view
        this.mColumnHeader = $c("table");
        var colSize = this.mColumnList.length;
        var titleRow = $c("tr");
        var othis = this;       
        for (var c = 0; c < colSize; c++) {
            var mColumnItem = this.mColumnList[c];
            var cell = $c("td");
            if (mColumnItem.getFlag() === ColumnSerialNumberFlag) {
                setCss(cell, "column");
            }
            else if (mColumnItem.getFlag() === ColumnCheckBoxFlag) {
                var checkBox = createInput("checkbox", "全选", "auto", "auto", "", "全选", "center");
                checkBox.onclick = function (e) { e = e ? e : event; othis.onRowCheck(this, true); cancelBubble(e); };
                checkBox.ondblclick = function (e) { e = e ? e : event; cancelBubble(e); };
                cell.appendChild(checkBox);
                cell.style.textAlign = "center";
                setCss(cell, "column");
            }
            else if (mColumnItem.getFlag() === ColumnSpaceFlag) {
                setCss(cell, "lastcolumn");
            }
            else {
                setCss(cell, "column");
                cell.innerHTML = mColumnItem.getTitle();
                cell.title = mColumnItem.getTitle();
                cell.cIndex = c;//set ColumnIndex               
                cell.onmouseover = function (e) { e = e ? e : event; setCss(this, "over"); };
                cell.onmousedown = function (e) { e = e ? e : event; setCss(this, "sortdown"); };
                cell.onmouseup = function (e) {
                    e = e ? e : event; setCss(this, "over");
                    othis.onSortEvent(e,this,this.cIndex); 
                };
                cell.onmouseout = function (e) { e = e ? e : event; setCss(this, "column"); };
            }
            //set td style 
            cell.style.width = mColumnItem.getWidth();
            //add cell to row
            titleRow.onclick = function (e) { e = e ? e : event; othis.selectRow(this, false); cancelBubble(e); };
            titleRow.appendChild(cell);  
        }
        //add row to table
        this.mColumnHeader.appendChild(titleRow);
        //add table to panel
        this.mTitleView.appendChild(this.mColumnHeader);
    }
};

/**
*init Data View
*/
DataGridView.prototype.initDataView = function () {
    //init DataView
    if (this.mColumnList != null && this.mColumnList.length > 0) {
        //clear 
        this.mDataView.innerHTML = "";
        this.mDataTable = $c("table");
        this.mRowList = new Array();
        this.mCurrentSortIndex = 0;
        //add last space 
        this.endDataRow();
        //add table to panel
        this.mDataView.appendChild(this.mDataTable);
    }
};

/**
*update ScrollView style
*/
DataGridView.prototype.updateScrollView = function () {
    //check view init
    if (this.mDataTable == null 
        || this.mVScrollView == null) {
        return;
    }
    //Computed view height   
    var ph = getComputedStyle(this.mView, null).height.replace("px", "");
    var th = getComputedStyle(this.mTitleView, null).height.replace("px", "");
    var dh = getComputedStyle(this.mDataTable, null).height.replace("px", "");
    var vh = ph - th;
    this.mDataView.style.height = vh + "px";      
    //set scroll event
    if (!this.initFlag){
        var o = this;
        this.mView.appendChild(this.mVScrollView);
        this.mVScrollView.onscroll = function () {
            o.mDataView.scrollTop = this.scrollTop;
        };
        //add wheel event
        this.mDataView.onmouseover = function (e) {
            e = e ? e : event;
            o.mFocus = true;
            o.mWheel = addMouseWheelEvent(o);
        };
        this.mDataView.onmouseout = function (e) {
            e = e ? e : event;
            o.mFocus = false;
            delMouseWheelEvent(o.mWheel);
        };
    }
    //set vscrollbar  
    this.mVScrollView.innerHTML = "";
    if (dh > vh) {
        var hdiv = $c("div");
        hdiv.style.height = dh + "px";
        this.mVScrollView.style.height = vh + "px";
        this.mVScrollView.style.top = th + "px";
        this.mVScrollView.appendChild(hdiv);
    }
    else if (this.initFlag) {
        this.mDataView.scrollTop = this.mVScrollView.scrollTop = 0;
    }
};

/**
*init
*/
DataGridView.prototype.init = function () {
    this.invalidate();
    //check init flag
    if (this.initFlag) {
        alert("DataGridView has init!");
    }
    //init view
    if (this.mColumnList != null && this.mColumnList.length > 0) {
        //clear
        this.mCheckColumnList = null;
        //create title view
        this.initTitleView();
        //create data view
        this.initDataView();
        //update ScrollView style
        this.updateScrollView();
        //init flag 
        this.mRowList = new Array();
        this.mCurrentSortIndex = 0;
        this.initFlag = true;
    }
};

/**
 * getCheckRows
 */
DataGridView.prototype.getCheckRows = function () {   
    var chkRows = new Array();
    if (this.mCheckColumnList != null && this.mCheckColumnList.length > 0) {
        for (var i = 0; i < this.mCheckColumnList.length; i++) {
            if(this.mCheckColumnList[i].checked){
                chkRows[chkRows.length] = this.mCheckColumnList[i].tag;
            }
        }
    } 
    return chkRows;   
};

/**
 * onRowCheck
 */
DataGridView.prototype.onRowCheck = function (o, isAll) {
    if (isAll === true) {
        if (this.mCheckColumnList != null && this.mCheckColumnList.length > 0) {
            for (var co  of this.mCheckColumnList) {
                co.checked = o.checked;
            }
        }
    }
    else {
        //add your code here
    }
};

/**
*on Mouse Wheel Event
*/
DataGridView.prototype.onMouseWheelEvent = function (e) {
    var type = getMouseWheel(e);
    var step = 10;
    if (type === 1) {
        if (this.mVScrollView.scrollTop > 0) {
            if (this.mVScrollView.scrollTop < 5) {
                step = this.mVScrollView.scrollTop;
            }
            this.mVScrollView.scrollTop -= step;
            this.mDataView.scrollTop = this.mVScrollView.scrollTop;
        }
    } else if (type == -1) {
        var scrollheight = this.mVScrollView.scrollHeight;
        var dh = getComputedStyle(this.mDataView, null).height.replace("px", "");
        scrollheight -= dh;
        if (this.mVScrollView.scrollTop < scrollheight) {
            if (this.mVScrollView.scrollTop + step > scrollheight) {
                step = scrollheight - this.mVScrollView.scrollTop;
            }
            this.mVScrollView.scrollTop += step;
            this.mDataView.scrollTop = this.mVScrollView.scrollTop;
        }
    }
};

/**
*on Data Row Event
*/
DataGridView.prototype.onDataRowEvent = function (o, evt) {
    if (evt === "ondblclick") {
        alert(o.rowIndex);
    }
};
/**
*onButtonEvent
*/
DataGridView.prototype.onButtonEvent = function (o, name) {
    alert(name);
};
/**
*onEditeEvent
*/
DataGridView.prototype.onEditEvent = function (o, status) {
    alert(status);
};
/**
*onInitButtonValue
*/
DataGridView.prototype.onInitButtonValue = function (arg,tag) {
    return "";
};
/**
*onSortEvent
*/
DataGridView.prototype.onSortEvent= function (evt,o,index) {   
   this.mCurrentSortIndex = index; 
   this.mRowList.sort(this.onSortCompare);
   //rebuild
   this.rebuild();  
   //set next sort type
   var columItem = this.getColumn(this.mCurrentSortIndex);
   if(columItem.sortType == 0){
        columItem.sortType = 1;
   }
   else{
        columItem.sortType = 0 ;
   }
};

/**
 * onSort
 */
DataGridView.prototype.onSortCompare = function(a,b){    
    if(typeof(a) != typeof(b)){
        return 0;
    }      
    if(!a.childNodes || !b.childNodes){
        return 0;
    }   
    if(a.childNodes.length != b.childNodes.length){
        return 0;
    }      
    var othis = a.dataGridView;
    var columItem = othis.getColumn(othis.mCurrentSortIndex);
    if(othis && othis.mCurrentSortIndex >= 0 && othis.mCurrentSortIndex < a.childNodes.length){
        var cell1 = a.childNodes[othis.mCurrentSortIndex];
        var cell2 = b.childNodes[othis.mCurrentSortIndex];
        if(cell1 && cell2){
            var str1 = cell1.innerHTML;
            var str2 = cell2.innerHTML; 
            //check is number
            if(isNumberStr(str1) && isNumberStr(str2)){
                str1 = 1000 * str1;
                str2 = 1000 * str2;
            }   
            //compare with sortType        
            if(columItem.sortType == 0){
                if(str1 < str2) return -1;
                else if(str1 > str2) return 1;
            }
            else{
                if(str1 < str2) return 1;
                else if(str1 > str2) return -1;
            }       
        }
    }
    return 0;
};

/**
 * rebuild
 */
DataGridView.prototype.rebuild = function () {
    if(!this.mRowList || this.mRowList.length == 0 || this.mDataTable == null){
        return;
    }
    //removeAll
    this.mDataTable.innerHTML = "";    
    for(var row of  this.mRowList){
        this.mDataTable.appendChild(row);
    }
    //endDataRow
    this.endDataRow();
};

/**
*remove All Data
*/
DataGridView.prototype.removeAll = function () {
    if (this.mDataTable == null) {
        return;
    }
    this.mDataTable.innerHTML = "";
    this.mRowCount = 0;
    this.mSelectRow = null;
    this.mRowList = new Array();
    this.mCurrentSortIndex = 0;
};

/**
*endDataRow
*/
DataGridView.prototype.endDataRow = function () {
    //check init flag
    if (this.mDataTable == null || this.mColumnList == null || this.mColumnList.length == 0) {
        return false;
    }
    //add last space 
    var othis = this;
    var srow = $c("tr");
    srow.className = "lastrow";
    for (var c of this.mColumnList) {
        var cell = $c("td");
        srow.appendChild(cell);
    }
    srow.onclick = function (e) { e = e ? e : event; othis.selectRow(this, false); };
    this.mDataTable.appendChild(srow);
    //updateScrollView
    this.updateScrollView();
};

/**
*addRow
*/
DataGridView.prototype.addRow = function (dataArr,tag,flag) {
    //check init flag
    if (this.mDataTable == null || this.mColumnList == null || this.mColumnList.length == 0) {
        return false;
    }
    //check pars
    if (typeof (dataArr) == 'undefined' || dataArr == null || !isArray(dataArr)) {
        return false;
    }
    //check pars length
    var dataLen = dataArr.length;
    var colSize = this.mColumnList.length;
    if (dataLen != colSize) {
        return false;
    }
    //create data row
    var othis = this;
    var r = this.mRowCount;
    var dataRow = $c("tr");   
    //build cell list
    for (var c = 0; c < colSize; c++) {
        var cell = $c("td");
        if (this.mColumnList[c].getFlag() === ColumnSerialNumberFlag) {
            cell.innerHTML = r.toString();
            cell.className = "firstcolumn";
            cell.tag = dataArr[c];
        }
        else if (this.mColumnList[c].getFlag() === ColumnCheckBoxFlag) {
            var checkBox = createInput("checkbox", r.toString(), "auto", "auto", "", "选中", "center");
            checkBox.onclick = function (e) { e = e ? e : event; othis.onRowCheck(this, false); cancelBubble(e); };
            checkBox.ondblclick = function (e) { e = e ? e : event; cancelBubble(e); };
            checkBox.index = r;
            checkBox.tag = dataArr[c];
            if(!isNull(tag)){
                checkBox.data = tag;
            }
            cell.appendChild(checkBox);
            cell.className = "checkcolumn";
            //save to check columnlist
            this.saveCheckColumn(checkBox);
        }
        else if (this.mColumnList[c].getFlag() === ColumnSpaceFlag) {
            cell.tag = dataArr[c];
        }
        else if (this.mColumnList[c].getFlag() === ColumnEditFlag) {
            //set td data                    
            var editbox = $c("div");
            editbox.innerHTML = dataArr[c];            
            editbox.rowIndex = r;
            editbox.columnIndex = c;
            editbox.className = "edit";
            if(!isNull(tag)){
                editbox.data = tag;
            }
            cell.appendChild(editbox);
            cell.ondblclick = function (e) {
                e = e ? e : event;
                othis.setCurrentEditBox(this.childNodes[0]);
                othis.selectRow(this.parentNode, false);
                cancelBubble(e);
            };
            cell.onclick = function (e) {
                e = e ? e : event;
                if (!this.childNodes[0].contenteditable) {
                    othis.selectRow(this.parentNode, true);
                    othis.cancelCurrentEditBox();
                }
                cancelBubble(e);
            };
        }
        else if (this.mColumnList[c].getFlag() === ColumnImageFlag) {  
            var imgObj = $c("img");
            imgObj.src = dataArr[c];
            imgObj.height= "40";
            imgObj.onclick = function(e){
                e = e ? e : event;
                othis.onButtonEvent(this, this.title);
                cancelBubble(e);
                OpenWin(this.src,"图片查看",680,480,true,true);
            };
            cell.appendChild(imgObj);
        }
        else if (this.mColumnList[c].getFlag() === ColumnDropListFlag) {
            cell.tag = dataArr[c];
        }
        else if (this.mColumnList[c].getFlag() === ColumnButtonFlag) {
            var linkBtn = $c("a");
            var titleStr = this.onInitButtonValue(dataArr[c],tag);
            if(empty(titleStr)){
                titleStr = this.mColumnList[c].getValue();
            }
            linkBtn.innerHTML = titleStr;
            linkBtn.title = titleStr;
            linkBtn.href = "#";
            linkBtn.rowIndex = r;
            linkBtn.columnIndex = c;
            linkBtn.tag = dataArr[c];
            //save data 
            if(!isNull(tag)){
                linkBtn.data = tag;
            }
            linkBtn.onclick = function (e) {
                e = e ? e : event;
                othis.onButtonEvent(this, this.title);
                cancelBubble(e);
            };
            cell.appendChild(linkBtn);
            cell.className = "btncolumn";
            cell.ondblclick = function (e) {
                e = e ? e : event;
                cancelBubble(e);
            };
            cell.onclick = function (e) {
                e = e ? e : event;
                cancelBubble(e);
            };
        }
        else if (c < dataLen) {
            //set td data
            cell.innerHTML = dataArr[c];   
            if(typeof(flag) === "undefined" || flag == 0){
                cell.title = dataArr[c]; 
            } 
            //set color
            var color = this.mColumnList[c].getColor();
            if(typeof(color) != "undefined" && color != ""){
                cell.style.color = color;
            }
        }
        else {
            //set td data
            cell.innerHTML = "Invalidate";
        }       
        //set td width        
        cell.style.width = this.mColumnList[c].getWidth();        
        //add cell to row
        cell.rowIndex = r;
        cell.columnindex = c;
        dataRow.appendChild(cell);
    }
    //set row style  
    dataRow.onmouseover = function (e) { e = e ? e : event; if (othis.mSelectRow != this) setCss(this, "dataover"); };
    dataRow.onmouseout = function (e) { e = e ? e : event; if (othis.mSelectRow != this) setCss(this, ""); };
    dataRow.onclick = function (e) {
        e = e ? e : event;
        othis.cancelCurrentEditBox();
        othis.selectRow(this, true);
        othis.onDataRowEvent(this, "onclick");
        cancelBubble(e);
    };
    dataRow.ondblclick = function (e) { e = e ? e : event; othis.onDataRowEvent(this, "ondblclick"); cancelBubble(e); };
    //add row to table
    dataRow.rowIndex = r;   
    dataRow.tag = tag;      
    dataRow.dataTag = tag; 
    dataRow.dataFlag = flag;
    dataRow.dataSource = dataArr;
    dataRow.dataGridView = this;
    this.mDataTable.appendChild(dataRow);
    this.mRowCount++; //add count 
    //add sort row 
    if(this.mRowList){      
        this.mRowList[this.mRowList.length] = dataRow;
    }   
    return true;
};

/**
*get DataSource
*/
DataGridView.prototype.getDataSource = function () {
    return this.data;
};

/**
*set DataSource
*/
DataGridView.prototype.setDataSource = function (data) {
    this.data = data;
    if (data == null || typeof (data) == 'undefined') {
        this.init();
    }
};

/**
 * setSelectedRow
 */
DataGridView.prototype.setSelectedRow = function (index,isSelected) {
    if(this.mDataTable == null){
        return;
    }
    if(index >= 0 && index < this.mDataTable.childNodes.length){
        var o = this.mDataTable.childNodes[index];
        this.selectRow(o,isSelected);
    }
};
/**
*showErrMsg
*/
DataGridView.prototype.showErrMsg = function (index,msg){
    this.removeAll();
    var rowArr = new Array();     
    for(var i = 0; i < this.getColumnCount();i++){                
        if(i == index){
            rowArr[i] = "结果为空:"+msg;
        }      
        else{
            rowArr[i] = "";
        }
    }               
    this.addRow(rowArr);
    //must end add
    this.endDataRow();
};

markscript("DataGridView");
//end DataGridView.js

